// 引入 variables.scss 以使用全局变量
@import '@/styles/variables';

.container {
    display: flex;
    flex-direction: column;
    position: relative;

    .tips {
        position: absolute;
        bottom: 32px;
        width: 100%;
        text-align: center;
        font-size: $font-size-large;
        color: $title-color;
    }

    .title {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        font-size: $font-size-base;
        color: $title-color;
    }

    :global {
        .at-image-picker__flex-box {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 100px 0;

            .at-image-picker__flex-item {
                margin: 0;
                padding-top: 200px;
                height: 200px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;

                .at-image-picker__item {
                    width: 200px;
                    height: 200px;
                    position: relative;
                    background: #F5F5F5;
                    border-radius: 50%;
                    overflow: visible;

                    .at-image-picker__preview-img {
                        position: absolute;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        align-self: stretch;
                        border-radius: 50%;
                        background: #fff;
                    }
                }
            }
        }
    }
}